<style scoped>
.pages /deep/ .el-collapse {
  border-top: 0;
}
.noticeShowM {
  border-left: 4px solid #409EFF;
  padding: 15px;
  font-size: 13px;
  line-height: 1.7;
  background: #F0F8FF;
  margin-bottom: 20px;
}
.totalR {
  float:right;
  margin-right:8px;
  margin-top:6px;
  font-size: 14px;
  color:#666;
}
</style>
<!--  -->
<template>
  <div class="pages">
    <div class="noticeShowM">
      <p>
        页面管理也就是对网站的导航菜单进行管理，主要是针对页面（导航）显示，排序，链接，打开方式以及挂载系统等进行编辑。
      </p>
      <p>
        分类普通页面、系统页面、外部链接页面这几类！
      </p>
      <!-- <p>
        引导页是整站唯一的页面，无法删除，只能关闭或开启！
      </p> -->
    </div>
    <BootPage />

    <TipTotal title="页面数据">
      <div>
        <Create :changeDataLoading="changeDataLoading" :resetPageData="resetPageData" />
      </div>
      <template slot="total">
        <p class="totalR" v-if="total">页面数（<span
          class="green">{{currentSite && currentSite.language && currentSite.language.name}}</span>）：{{total}}</p>
      </template>
    </TipTotal>
    <DataTable ref="pageDataTable" :totalPage="totalPage" :loading="pageloading"
      :changeDataLoading="changeDataLoading" />
    <div style="height: 18px;"></div>
  </div>
</template>

<script>
import TipColla from '@/components/common/TipColla.vue'
import TipTotal from '@/components/common/TipTotal.vue'
import BootPage from '@/components/main/user/pages/BootPage.vue'
import Create from '@/components/main/user/pages/Create.vue'
import DataTable from '@/components/main/user/pages/DataTable.vue'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 页面总数
      total: '',
      // 页面的数据是否加载
      pageloading: true
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  components: {
    TipColla,
    TipTotal,
    BootPage,
    Create,
    DataTable
  },
  methods: {
    totalPage (total) {
      if (total) {
        this.total = '' + total
      } else if (parseInt(total) === 0) {
        this.total = '0'
      }
    },
    changeDataLoading (bool) {
      this.pageloading = bool
    },
    // 重置数据
    resetPageData () {
      this.$refs.pageDataTable.resetData()
    }
  }
}

</script>
